<template>
 <div>
 </div>
</template>

<script lang="ts" setup>
// 重复赋值的变量只会取最后一个
// 声明一个字符串
var str:string="张三";
// str=11      //只能是字符串类型，不然会报红
str='李四'      
// console.log(str);   //李四

// 声明一个数字
var num:number=11;
// console.log(num);   //11

// 数组      
// 两种声明方式：var 变量名:数组项的数据类型[]=值  ||  var 变量名:变量的数据类型<数组项的数据类型>=值
 
// var arr:number[]=[1,2,3]; any表示所有数据类型都可以用
var arr:Array<any>=[1,'2',3]
// 可以添加对应数据类型的值
// arr.push('2')       //可以添加，但是会爆红
// arr.push(4)         //可以添加，不会爆红
// console.log(arr);

// 元组     
// 数据类型和值是一一对应的少一个都不行
var arr1:[string,number,string,number]=['1',2,'3',4]
// console.log(arr1);

// 对象     实参传递参数了，形参没接受或没写类型或类型不对都会爆红
function fn(val:object){
    // console.log(val);
}
fn({num:111})

// 枚举
// 没赋值默认从0开始,赋值后后面的会根据前面的往上加
// 有一个是字符串类型，那所有的都得是字符串
enum mj{
    year=1,
    month=4,
    day=2,
}

// console.log(mj.month);   //获取指定值，结果：4
// console.log(mj[4]);      //结果：month


// 泛型
// 根据实参传递的参数得到参数的类型，T就会是这个类型
// function fn1<T>(val:T):T{
//     return val
// }

// console.log(fn1('张三'));


// 类型推论
// 跟js差不多，不需要给变量设置数据类型，
let a;
a=11;
// console.log(a);


// 联合类型
// 声明变量可以设置多个数据类型,值是这几个数据类型任意一个都可以
var b:string | number | object
b=12
b='张三'
b={a:11}
// console.log(b);


// 接口     
// 看着跟继承似的，jk1的参数类型要和jk里的类型一样，并且不能少写、多写属性，jk有多少个属性，jk1就得有多少个属性
// 并且jk1的属性名要和jk的属性名对应上
// interface jk{
//     name:string,
//     age:number,
//     sex:string
// }

// let jk1:jk={
//     name:'张三',
//     age:18,
//     sex:"男"
// }
// console.log(jk1.name);      //可以访问对象中的属性
// 可以使用for循环对象
// for(var key in jk1){
//     // console.log(key);
// }


// 接口设置可选属性     属性名后面加上冒号即可  这样即使不写这个属性也不会爆红
// interface jk{
//     name:string,
//     age:number,
//     sex?:string
// }

// let jk1:jk={
//     name:'张三',
//     age:18,
// }
// console.log(jk1.sex);   //undefined



// 接口设置只读   就是只能获取这个属性，但是不能修改这个属性
interface jk{
    readonly name:string,
    age:number,
    sex?:string
}

let jk1:jk={
    name:'张三',
    age:18,
}
// jk1.name='李四'     //不允许修改，会爆红
// console.log(jk1.name);









</script>

<style scoped lang='scss'>
</style>